/* 首页 */


/* 

1 ui库的轮播图 暂时无法自动轮播
  1 原因 一开始的时候 轮播图数组是空数组 
    等待请求回来了, 数组有值了 
  2 但是 组件 没有触发更新-> 让轮播图动起来 
  3 考虑更加优化的方式来解决不过
    1  轮播图组件有数据之后才渲染 条件渲染 


 */



import React from 'react';
import { Carousel } from 'antd-mobile';
// import axios from "axios";
import { request as axios, baseURL } from "../utils/request";


// 把本地图片引入尽来 
import nav1 from "../assets/images/nav-1.png";
import nav2 from "../assets/images/nav-2.png";
import nav3 from "../assets/images/nav-3.png";
import nav4 from "../assets/images/nav-4.png";

// 引入局部样式 
import indexCss from "./index.module.scss";

// 引入 城市搜索组件
import CitySearch from "../components/CitySearch";

console.log("index");


class Index extends React.Component {
  state = {
    imgHeight: 176,
    // 轮播图数组
    swiperList: [],
    // 导航数组
    navList: [{ id: 0, text: "整租", imgSrc: nav1 }, { id: 1, text: "合租", imgSrc: nav2 }, { id: 2, text: "地图找房", imgSrc: nav3 }, { id: 3, text: "去出租", imgSrc: nav4 }],
    // 租房小组
    groupList: [],
    // 最新资讯
    newsList: []

  }
  componentDidMount() {
    this.getSwiper();
    this.getGroup();
    this.getNews();


  }

  // 获取轮播图
  getSwiper = () => {
    return axios.get("/home/swiper")
      .then(res => {
        this.setState({
          swiperList: res.data.body
        })
      });
  }
  // 获取租房小组
  getGroup = () => {
    return axios.get("/home/groups")
      .then(res => {
        this.setState({
          groupList: res.data.body
        });
      });
  }
  // 获取最新资讯
  getNews = () => {
    return axios.get("/home/news")
      .then(res => {
        this.setState({
          newsList: res.data.body
        });
      });
  }
  render() {
    const { swiperList, navList, groupList, newsList } = this.state;

    return (
      <div>


        {/* 1.0 轮播图 开始 */}
        <div className={indexCss.hk_carousel}>

          {swiperList.length && <Carousel
            autoplay
            infinite
          >
            {swiperList.map(val => (
              <a
                key={val.id}
                href="http://www.alipay.com"
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
              >
                <img
                  src={baseURL + val.imgSrc}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </a>
            ))}
          </Carousel>}

          <div className={indexCss.city_search}> <CitySearch  /></div>
        </div>
        {/* 1.0 轮播图 结束 */}

        {/* 2.0 开始 */}
        <nav className={indexCss.hk}>
          {navList.map(v => <div className={indexCss.nav_item} key={v.id} >
            <img src={v.imgSrc} alt="" />
            <div>{v.text}</div>
          </div>)}
        </nav>
        {/* 2.0 结束 */}

        {/* 3.0 租房小组 开始 */}
        <div className={indexCss.hk_group}>
          <div className={indexCss.hk_group_title}> <span>租房小组</span> <span>更多</span> </div>
          <div className={indexCss.hk_group_content}>
            {groupList.map(v => <div className={indexCss.hk_group_item} key={v.id} >
              <div className={indexCss.hk_group_item_info}>
                <div className={indexCss.hk_group_item_info_title}>{v.title}</div>
                <div className={indexCss.hk_group_item_info_desc}>{v.desc}</div>
              </div>
              <div className={indexCss.hk_group_item_img}>
                <img src={baseURL + v.imgSrc} alt="" />
              </div>
            </div>)}
          </div>

        </div>
        {/* 3.0 租房小组 结束 */}

        {/* 4.0 最新资讯 开始 */}
        <div className={indexCss.news}>
          <div className={indexCss.news_title}>
            最新资讯
          </div>
          <div className={indexCss.news_content}>
            {newsList.map(v => <div key={v.id} className={indexCss.news_item} >
              <div className={indexCss.news_item_img}>
                <img src={baseURL + v.imgSrc} alt="" />
              </div>
              <div className={indexCss.news_item_info}>
                <div className={indexCss.news_item_info_title}>{v.title}</div>
                <div className={indexCss.news_item_info_detail}>
                  <span>{v.from}</span>
                  <span>{v.date}</span>
                </div>
              </div>
            </div>)}
          </div>
        </div>
        {/* 4.0 最新资讯 结束 */}

      </div>
    );
  }
}
export default Index;